<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="160" :error-type="['toast']">
			<u-form-item label="跟进方式" prop="channelName">
				<u-input v-model="form.channelName" type="select" @click="channelShow = true"/>
			</u-form-item>
			<u-form-item label="跟进状态" prop="stateName">
				<u-input v-model="form.stateName" 
					type="select" @click="followShow = true"/>
			</u-form-item>
			<u-form-item label="跟进时间" prop="actualFollowDate">
				<u-input v-model="form.actualFollowDate" type="select" @click="actualShow = true"/>
			</u-form-item>
			<u-form-item label="下次跟进" prop="nextTime">
				<u-input v-model="form.nextTime" type="select" @click="nextShow = true"/>
			</u-form-item>
			<u-form-item label="跟进详情" prop="content">
				<u-input v-model="form.content" type="textarea"/>
			</u-form-item>
<!-- 			<u-form-item label="图片" prop="imgUrl">
				<u-upload :action="action" :file-list="fileList" ></u-upload>
			</u-form-item> -->
		</u-form>
		<u-button @click="submit" style="margin-top: 60rpx;">提交</u-button>
		
		<u-select v-model="channelShow" :list="channelList" @confirm="channelConfirm"></u-select>
		<u-select v-model="followShow" :list="type === 'clue' ? clueStatus : clientStatus" label-name="name" value-name="id"
			@confirm="followConfirm"></u-select>
		<u-picker v-model="actualShow" mode="time" :params="params" @confirm="actualConfirm"></u-picker>
		<u-picker v-model="nextShow" mode="time" :params="params" @confirm="nextConfirm"></u-picker>
	</view>
</template>

<script>
	import { addFollow } from '@/api/clientele.js'
	import { mapState } from "vuex"
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	export default {
		data() {
			return {
				// clue(线索), client(客户)， contract(合同)
				id: '',
				type: 'clue',
				form: {
					channelName: '',
					channel: '',
					leadsStatus: 0,
					clienteleStatus: 0,
					stateName: '',
					actualFollowDate: '',
					nextTime: '',
					content: ''
				},
				
				rules: {
					channelName: [{
						required: true,
						message: '请选择跟进方式',
					}],
					stateName: [{
						required: true,
						message: '请选择跟进状态',
					}],
					actualFollowDate: [{
						required: true,
						message: '请选择跟进时间',
					}],
					nextTime: [{
						required: true,
						message: '请选择下次跟进时间',
					}],
					content: [{
						required: true,
						message: '请填写跟进详情',
					}],
				},
				
				channelShow: false,
				followShow: false,
				
				actualShow: false,
				nextShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false,
					timestamp: true,
				},
				
				action: '',
				fileList: []
			}
		},
		computed: {
			...mapState({
				channelList: state => state.dict.channelList,
				clueStatus: state => state.dict.clueStatus,
				clientStatus: state => state.dict.clientStatus,
				tchInfo: state => state.user.tchInfo,
			}),
		},
		onLoad(options) {
			this.id = options.id;
			this.type = options.type;
			this.leadsId = options.leadsId;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				console.log(this.tchInfo)
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (!valid) {
						return;
					}
					const { type, tchInfo, id, leadsId } = this
					const params = {
						type: type === 'clue' ? 'leads' : 'clientele',
						...this.form,
						staffId: tchInfo.staff.id,
						staffName: tchInfo.staff.realName,
						areaId: tchInfo.staff.areaId,
						[`${type === 'clue' ? 'leads' : 'clienteles'}Id`]: id,
					}
					if (type === 'client') {
						params.leadsId = leadsId
					}
					console.log(params)
					addFollow(params).then(res => {
						console.log(res);
						const event = this.getOpenerEventChannel();
						event.emit('addSuccess', {})
						uni.navigateBack()
					})
				});
			},
			
			channelConfirm(res) {
				console.log(res)
				const item = res[0]
				this.form.channelName = item.label
				this.form.channel = item.value
			},
			
			followConfirm(res) {
				console.log(res)
				const item = res[0]
				this.form.stateName = item.label
				if (this.type === 'clue') {
					this.form.leadsStatus = item.value
				} else {
					this.form.clienteleStatus = item.value
				}
			},
			
			actualConfirm(res) {
				this.form.actualFollowDate = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd hh:MM:ss');
			},
			
			nextConfirm(res) {
				this.form.nextTime = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd hh:MM:ss');
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
</style>
